<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 16rpx;box-sizing: border-box;">
			<view style="box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;background-color: #FFF;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
			<view style="color: #232426;font-size: 32rpx;font-weight: 500;margin-left: 80rpx;">
				{{$t('my.titleNotice')}}
			</view>
			<view class="menu-btn" @click="readAll">
				{{$t('my.titleNoticeReadAll')}}
			</view>
		</view>
		<view style="width: 100%;background-color: #FFF;border-radius: 80rpx 80rpx 0 0;margin-top: 32rpx;">
			<view style="display: flex; justify-content: space-between;padding: 32rpx 40rpx 16rpx;">
				<view>
					<view :class="{'type-item-active':type==1,'type-item':type!=1}" @click="changeType(1)">
						订单
					</view>
					<view class="red-bag" v-if="chat_num.order"></view>
				</view>
				<view>
					<view :class="{'type-item-active':type==2,'type-item':type!=2}" @click="changeType(2)">
						粉丝
					</view>
					<view class="red-bag" v-if="chat_num.fans"></view>
				</view>
				<view>
					<view :class="{'type-item-active':type==3,'type-item':type!=3}" @click="changeType(3)">
						点赞
					</view>
					<view class="red-bag" v-if="chat_num.likes"></view>
				</view>
				<view>
					<view :class="{'type-item-active':type==4,'type-item':type!=4}" @click="changeType(4)">
						留言
					</view>
					<view class="red-bag" v-if="chat_num.chat"></view>
				</view>
				<view>
					<view :class="{'type-item-active':type==5,'type-item':type!=5}" @click="changeType(5)">
						平台
					</view>
					<view class="red-bag" v-if="chat_num.system"></view>
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;box-sizing: border-box;align-items: center;background-color: #D8F6FF;padding: 24rpx 20rpx;">
				<view style="display: flex;justify-content: flex-start;align-items: center;">
					<view>
						<u-image
							src="/static/images/icon/lightning.png"
							width="40rpx"
							height="40rpx"
						></u-image>
					</view>
					<view style="margin-left: 16rpx;letter-spacing: 0.14rpx;">
						{{$t('my.tipsNoticeOpenPower')}}
					</view>
					<view style="background-color: #FFF;color: #27C5D6;padding:6rpx 24rpx;border-radius: 32rpx;border: 2rpx solid #27C5D6;font-size: 28rpx;">
						{{$t('my.btnNoticeOpenPower')}}
					</view>
				</view>
				<view>
					<u-image
						src="/static/images/icon/close-2x.png"
						width="40rpx"
						height="40rpx"
					></u-image>
				</view>
			</view>
			<view>
				<view v-if="type==1">
					<view style="width:100%;padding: 24rpx;display: flex;justify-content: space-between;box-sizing: border-box;align-items: center;">
						<view style="color: #6A707C;font-size: 24rpx;">
							{{$t('my.tipNoticeNum')}}{{number}}{{$t('my.tipNoticeUnit')}}
						</view>
						<view style="display: flex;justify-content: flex-end;">
							<view class="fifter-btn" @click="selTypeFn">
								<view>
									<u-image
										src="/static/images/icon/down-icon.png"
										width="28rpx"
										height="28rpx"
									></u-image>
								</view>
								<view class="fifter-title">
									{{orderType}}
								</view>
							</view>
							<view class="fifter-btn" @click="selDataFn">
								<view>
									<u-image
										src="/static/images/icon/tools.png"
										width="28rpx"
										height="28rpx"
									></u-image>
								</view>
								<view class="fifter-title">
									{{orderData}}
								</view>
							</view>
						</view>
					</view>
					<view style="padding: 24rpx;">
						<u-swipe-action>
							<u-swipe-action-item 
									:options="options2" 
									v-for="(item, index) in orderList" 
									:key="index" 
									:ref="'swipeAction' + item.id"
									@click="handleDelete(index,item.id)">
								<view class="order-card">
									<view class="card-left">
										<view style="border-radius: 50%;background-color: #EEF7FD;display: flex;justify-content: center;align-items: center;width: 84rpx;height: 84rpx;">
											<u-image
												src="/static/images/icon/speaker.png"
												width="48rpx"
												height="48rpx"
											></u-image>
										</view>
										<view style="margin-left: 20rpx;">
											<view class="" style="color: #808690;font-size: 24rpx;">來自 {{item.nickname}}</view>
											<view class="" style="display: flex;justify-content: flex-start;align-items: center;">
												<view style="color: #232426;font-size: 28rpx;width: 400rpx;overflow: hidden;text-overflow: ellipsis;">{{item.memo}}</view>
												<view style="color: #BEC0C5;font-size: 20rpx;">{{ formatTimeAgo(item.createtime) }}</view>
											</view>
										</view>
									</view>
									<view>
										<u-image
											:src="item.image"
											width="88rpx"
											height="88rpx"
											radius="18rpx"
										></u-image>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>
				</view>
				<view v-else-if="type==2">
					<view style="padding: 24rpx;">
						<u-swipe-action>
							<u-swipe-action-item :options="options2" v-for="(item, index) in orderList" :key="index">
								<view class="order-card">
									<view class="card-left">
										<view style="border-radius: 50%;display: flex;justify-content: center;align-items: center;">
											<u-image
												:src="item.avatar"
												width="84rpx"
												height="84rpx"
												radius="50%"
											></u-image>
										</view>
										<view style="margin-left: 20rpx;">
											<view class="" style="display: flex;justify-content: flex-start;align-items: center;">
												<view style="color: #232426;font-size: 28rpx;max-width:400rpx;overflow: hidden;text-overflow: ellipsis;">{{item.nickname}}</view>
												<view style="color: #BEC0C5;font-size: 20rpx;margin-left: 15rpx;">{{$t('my.tipsNoticeAction')}}</view>
											</view>
											<view class="" style="color: #BEC0C5;font-size: 20rpx;margin-top: 8rpx;">1分钟前</view>
										</view>
									</view>
									<view class="card-right">
										<view v-if="item.is_attention == 1" style="background-color: #FFF;color: #27C5D6;padding:6rpx 24rpx;border-radius: 32rpx;border: 2rpx solid #27C5D6;font-size: 28rpx;">
											{{$t('my.tipsNoticeAttention')}}
										</view>
										<view v-else style="background-color: #F6F8FA;color: #7A7B7E;padding:6rpx 24rpx;border-radius: 32rpx;border: 2rpx solid #E5E6E8;font-size: 28rpx;">
											{{$t('my.tipsNoticeIsAttention')}}
										</view>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>
				</view>
				<view v-else-if="type==3">
					<view style="padding: 24rpx;">
						<u-swipe-action>
							<u-swipe-action-item :options="options2" v-for="(item, index) in orderList" :key="index">
								<view class="order-card">
									<view class="card-left">
										<view style="border-radius: 50%;display: flex;justify-content: center;align-items: center;">
											<u-image
												:src="item.avatar"
												width="84rpx"
												height="84rpx"
												radius="50%"
											></u-image>
										</view>
										<view style="margin-left: 20rpx;">
											<view class="" style="display: flex;justify-content: flex-start;align-items: center;">
												<view style="color: #232426;font-size: 28rpx;max-width:400rpx;overflow: hidden;text-overflow: ellipsis;">{{item.nickname}}</view>
												<view style="color: #BEC0C5;font-size: 20rpx;margin-left: 15rpx;">{{$t('my.tipsNoticeAction2')}}</view>
											</view>
											<view class="" style="color: #BEC0C5;font-size: 20rpx;margin-top: 8rpx;">{{ formatTimeAgo(item.createtime) }}</view>
										</view>
									</view>
									<view class="card-right">
										<u-image
											:src="item.image"
											width="88rpx"
											height="88rpx"
											radius="18rpx"
										></u-image>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>
				</view>
				<view v-else-if="type==4">
					<view style="padding: 24rpx;">
						<u-swipe-action>
							<u-swipe-action-item :options="options2" v-for="(item, index) in orderList" :key="index">
								<view class="order-card">
									<view class="card-left">
										<view style="border-radius: 50%;display: flex;justify-content: center;">
											<u-image
												:src="item.avatar"
												width="84rpx"
												height="84rpx"
												radius="50%"
											></u-image>
										</view>
										<view>
											<view style="margin-left: 20rpx;display: flex;justify-content: space-between;align-items: center;">
												<view class="" style="display: flex;justify-content: flex-start;align-items: center;width: 300rpx;">
													<view style="color: #232426;font-size: 28rpx;max-width:400rpx;overflow: hidden;text-overflow: ellipsis;">{{item.nickname}}</view>
													<view style="color: #BEC0C5;font-size: 20rpx;margin-left: 15rpx;">回復貼文</view>
												</view>
												<view class="" style="color: #BEC0C5;font-size: 20rpx;margin-top: 8rpx;margin-right: 20rpx;">{{ formatTimeAgo(item.createtime) }}</view>
											</view>
											<view style="margin: 20rpx; padding: 12rpx 16rpx;background-color: #F6F8FA;color: #6A707C;border-radius: 20rpx;font-size: 24rpx;">
												感覺很適合上班族！👍 請問雞胸肉怎麼料理才不會柴呢？
											</view>
										</view>
									</view>
									<view class="card-right">
										<u-image
											:src="item.image"
											width="88rpx"
											height="88rpx"
											radius="18rpx"
										></u-image>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>
				</view>
				<view v-else-if="type==5">
					<view style="padding: 24rpx;">
						<u-swipe-action>
							<u-swipe-action-item :options="options2" v-for="(item, index) in orderList" :key="index" :name="index" style="border-top: 2rpx solid #F6F8FA;border-bottom: 2rpx solid #F6F8FA;">
								<view class="order-card" @click="showSystemFn">
									<view class="card-left">
										<view style="border-radius: 50%;background-color: #EEF7FD;display: flex;justify-content: center;align-items: center;width: 84rpx;height: 84rpx;">
											<u-image
												src="/static/images/icon/speaker.png"
												width="48rpx"
												height="48rpx"
											></u-image>
										</view>
										<view style="margin-left: 20rpx;">
											<view class="" style="color: #808690;font-size: 24rpx;">{{$t('my.tipsNoticeAction3')}}</view>
											<view class="" style="display: flex;justify-content: flex-start;align-items: center;">
												<view style="color: #232426;font-size: 28rpx;width: 400rpx;overflow: hidden;text-overflow: ellipsis;">{{item.memo}}</view>
												
											</view>
										</view>
									</view>
									<view style="display: flex;align-items: flex-end;justify-content: flex-start;">
										<view style="color: #BEC0C5;font-size: 20rpx;">{{ formatTimeAgo(item.createtime) }}</view>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>
				</view>
				<view v-else>
					
				</view>
				<view style="min-height: 1000rpx;" v-if="orderList.length == 0">
					<u-empty
					        marginTop="150"
							mode="message"
							text="暫無消息"
							iconSize="200"
							textSize="30"
					>
					</u-empty>
				</view>
			</view>
		</view>
		
		<card-popup ref="cardPopup" :listData="listData" @checkItem="handleData" />
		<!--系統通知-->
		<u-popup :show="showSystem" :closeOnClickOverlay="false" mode="bottom" :round="48" style="position: relative;">
			<image src="/static/images/icon/close.png" style="width: 60rpx;height: 60rpx; position: absolute;right: 28rpx;top: 58rpx;" @click="closeSystemFn"></image>
			<view class="system-title">
				限時活動
			</view>
			<view class="system-text">
				<u-parse :content="content"></u-parse>
			</view>
		</u-popup>
		<!--隐私协议結束-->
		
	</view>
</template>

<script>
	import uSwipeAction from '@/uni_modules/uview-ui/components/u-swipe-action/u-swipe-action.vue';
	import cardPopup from '@/components/card-popup.vue';
	import { getMsg, myOrderLog, myFans, likesUser, commentMyIndex, companyOrderLog, readAllMsg } from '@/config/api.js';
	
	export default {
		components: {
			cardPopup
		},
		data() {
			return {
				type:1,
				number:0,
				pages:1,
				limit:10,
				orderType:this.$t('my.btnNoticeType'),
				orderData:this.$t('my.btnNoticeData'),
				chat_num:{
					order:false,
					fans:false,
					likes:false,
					chat:false,
					system:false
				},
				orderList:[],
				options2: [{
					text: this.$t('my.btnNoticeReport'),
					style: {
						backgroundColor: '#FFA514'
					}
				}, {
					text: this.$t('my.btnNoticeDelete'),
					style: {
						backgroundColor: '#FF3D43'
					}
				}],
				handleDataType:0,
				listData:[],
				typeList:[{
					id:1,
					title:this.$t('my.btnNoticeType1'),
				},{
					id:2,
					title:this.$t('my.btnNoticeType2'),
				},{
					id:0,
					title:this.$t('my.btnNoticeType'),
				}],
				dataList:[{
					id:1,
					title:this.$t('my.btnNoticeData'),
				},{
					id:2,
					title:this.$t('my.btnNoticeData1'),
				},{
					id:3,
					title:this.$t('my.btnNoticeData2'),
				},{
					id:0,
					title:this.$t('my.btnNoticeData3'),
				}],
				showSystem:false,
				content:`<h4>富文本內容</h4>`
			}
		},
		onLoad(option) {
			this.getMsgFn();
			this.getOrderFn();
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			changeType(type){
				this.type = type;
				if( type == 1 ){
					this.getOrderFn();
				} else if(type == 2){
					this.orderList = [];
					this.getFansFn();
				} else if(type == 3){
					this.orderList = [];
					this.getLikesFn();
				} else if(type == 4){
					this.orderList = [];
					this.getChatFn();
				} else if(type == 5){
					this.orderList = [];
					this.getSystemFn();
				} else {
					
				}
			},
			showSystemFn(){
				this.showSystem = true;
			},
			closeSystemFn(){
				this.showSystem = false;
			},
			getMsgFn(){
				let that = this;
				// let userId = uni.getStorageSync('userId');
				let userId = 135;
				let parames = {
					data:{
						userid:userId
					}
				}
				getMsg(parames).then((res) => {
					//success
					console.log(res)
					//留言
					if( res.chat_num > 0 ){
						that.chat_num.chat = true;
					}
					//订单
					if(data.notice_list[5] > 0 ){
						that.chat_num.order = true;
					}
					//
					if(data.notice_list[3] > 0 ){
						that.chat_num.fans = true;
					}
					if(data.notice_list[4] > 0 ){
						that.chat_num.likes = true;
					}
					if(data.notice_list[2] > 0 ){
						that.chat_num.system = true;
					}
				}).catch(() =>{
					
				})
			},
			//订单通知
			getOrderFn(){
				let that = this;
				let parames = {
					data:{
						page:that.pages,
						limit:that.limit,
						keyword:''
					}
				}
				myOrderLog(parames).then((res) => {
					//success
					that.orderList = res.data.data
					that.number = res.data.total
				}).catch(() =>{
					
				})
			},
			getFansFn(){
				let that = this;
				let parames = {
					data:{
						page:that.pages,
						limit:that.limit,
						keyword:''
					}
				}
				myFans(parames).then((res) => {
					//success
					console.log(res)
					this.orderList = res.data
				}).catch(() =>{
					
				})
			},
			getLikesFn(){
				let that = this;
				let parames = {
					data:{
						page:that.pages,
						limit:that.limit,
						keyword:''
					}
				}
				likesUser(parames).then((res) => {
					//success
					console.log(res)
					this.orderList = res.data
				}).catch(() =>{
					
				})
			},
			getChatFn(){
				let that = this;
				let parames = {
					data:{
						page:that.pages,
						limit:that.limit,
						keyword:''
					}
				}
				commentMyIndex(parames).then((res) => {
					//success
					console.log(res)
					// this.orderList = res.data
				}).catch(() =>{
					
				})
			},
			getSystemFn(){
				let that = this;
				let parames = {
					data:{
						page:that.pages,
						limit:that.limit,
						keyword:''
					}
				}
				companyOrderLog(parames).then((res) => {
					//success
					console.log(res)
					// this.orderList = res.data
				}).catch(() =>{
					
				})
			},
			//全部已讀
			readAll(){
				let uid = uni.getStorageSync('userId');
				let that = this;
				let parames = {
					data:{
						userid:uid
					}
				}
				readAllMsg(parames).then((res) => {
					//success
					console.log(res)
					
				}).catch(() =>{
					
				})
			},
			selTypeFn(){
				this.handleDataType = 0;
				this.listData = this.typeList;
				this.$refs.cardPopup.show();
			},
			selDataFn(){
				this.handleDataType = 1;
				this.listData = this.dataList;
				this.$refs.cardPopup.show();
			},
			handleData(data) {
				//接收组件数据
				console.log('接收到组件数据:', data)
				this.$refs.cardPopup.close();
				if( this.handleDataType == 0 ){
					this.orderType = data.title;
				} else {
					this.orderData = data.title;
				}
				
				//重新获取列表
				this.orderList = [];
				this.number = 0;
				this.getOrderFn();
			},
			formatTimeAgo(timestamp){
				let now = Math.floor(Date.now() / 1000)
				let diff = now - timestamp
				
				// 1分钟内
				if (diff < 60) return '1分钟前'

				// 1小时内
				if (diff < 3600) return `${Math.floor(diff/60)}分钟前`

				// 24小时内
				if (diff < 86400) return `${Math.floor(diff/3600)}小时前`

				// 30天内
				if (diff < 2592000) return `${Math.floor(diff/86400)}天前`

				// 1年内
				if (diff < 31536000) {
				const months = Math.floor(diff/2592000)
				return `${months}个月前`
				}

				// 超过1年显示具体日期
				const date = new Date(timestamp * 1000)
				return `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`
			},
			handleDelete(index, id) {
			    let that = this;
				uni.showModal({
			    	title: '刪除此訊息?',
			    	content: '刪除後,所有聊天記錄將被清除',
					confirmText:'刪除',
					cancelText:'取消',
					cancelColor:'#007aff',
			    	success: function (res) {
			    		if (res.confirm) {
			    			console.log('用户点击确定');
							// 删除数据项
							that.orderList.splice(index, 1);
							// this.$forceUpdate();
							
							// 关闭当前滑动菜单
			    		} else if (res.cancel) {
			    			console.log('用户点击取消');
			    		}
			    	},
					complete:function(){
						that.$refs['swipeAction' + id][0].closeHandler();
					}
			    });
				
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #EEF7FD;
		min-height: 100vh;
		
		.menu-btn{
			color: #232426;
			font-size: 32rpx;
			font-weight:500;
			padding-right: 20rpx;
		}
		.type-item{
			color: #808690;
			font-size: 28rpx;
			line-height: 140%; /* 19.6px */
			letter-spacing: 0.28rpx;
			margin: 8rpx 24rpx;
			padding-bottom: 8rpx;
		}
		.type-item-active{
			color: #232426;
			font-size: 28rpx;
			line-height: 140%; /* 19.6px */
			letter-spacing: 0.28rpx;
			border-bottom: 4rpx solid #232426;
			font-weight: 600;
			margin: 8rpx 24rpx;
			padding-bottom: 8rpx;
		}
		.red-bag{
			width: 8rpx;
			height: 8rpx;
			background: red;
			border-radius: 50%;
			position: relative;
			top:-60rpx;
			right: -80rpx;
		}
		.fifter-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2rpx solid #E5E6E8;
			padding: 12rpx 24rpx;
			border-radius: 12rpx;
			margin-left: 8rpx;
			
			.fifter-title{
				margin-left: 12rpx;
				font-size: 28rpx;
			}
		}
		
		/* 穿透uView组件作用域 */
		::v-deep .u-swipe-action-item__content { 
			width: 100%;
			
			.order-card{
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				margin: 16rpx 0;
				
				
				
				.card-left{
					display: flex;
					justify-content: flex-start;
				}
			}
			
		} 
		
		// .swipe-action {
		// 	&__content {
		// 		 padding: 25rpx 0;
		
		// 		&__text {
		// 			 font-size: 15px;
		// 			 color: $u-main-color;
		// 			 padding-left: 30rpx;
		// 		 }
		// 	}
		// }
		.system-title{
			width: 100%;
			text-align: center;
			font-size: 30rpx;
			color: #323438;
			margin-top: 68rpx;
			font-weight: 500;
		}
		.system-text{
			padding: 40rpx;
		}
	}
	
</style>
